<script setup>
import { ref } from 'vue';
const pageType = ref('hasData');
import TabbarSignFun from "../component/TabbarSignFun.vue";

const holidayList = ref([
  {
    id: 1,
    title: '未登记',
    startDate: '李玉',
    endDate: '1234564',
    state: '审批通过',
    targetUrl: "/pages/user/signSpe",
    btnText: '拨打电话'
  },
  {
    id: 2,
    title: '未登记',
    startDate: '王涛',
    endDate: '1446465',
    state: '审批通过',
    targetUrl: "/pages/user/signSpe",
    btnText: '拨打电话'
  },
  {
    id: 3,
    title: '未登记',
    startDate: '玉英',
    endDate: '1321451',
    state: '审批通过',
    targetUrl: "/pages/user/signSpe",
    btnText: '拨打电话'
  },
  {
    id: 4,
    title: '未登记',
    startDate: '浩鸿',
    endDate: '1456255',
    state: '审批通过',
    targetUrl: "/pages/user/signSpe",
    btnText: '拨打电话'
  }
]);
const goToPage = (item) => {
  uni.navigateTo({
    url: item.targetUrl
  });
};
</script>

<template>
<view class="back">
  <view>
    <TabbarSignFun/>
  </view>
  <view>
    <view>
      <view
          v-for="(item, index) in holidayList"
          :key="item.id"
          class="pc"
      >
        <view class="icon">

          <view class="zj">
            <view class="lg">
              <image class="bz" src="/static/image/bz8@2x.png"></image>
              <view>
                <text class="title2">{{ item.title }}</text>
              </view>
            </view>

            <view class="wz">
              <text class="title3">
                学生姓名：{{ item.startDate }} <br>
                学号：{{ item.endDate }} <br>
              </text>
              <hr class="hr">
              <view class="state-btn-row">
                <text class="state-text">{{ item.state }}</text>
                <view class="status-btn-row">
                  <button
                      class="action-btn"
                      @click="goToPage(item)"
                  >
                    {{ item.btnText }}
                  </button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<style scoped>
.back{
  background-color: #F2F4F7;
  height: 650px;
  padding-top: 12px;
}

.pc {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 10px;
}

.icon {

  width: 351px;
  height: 138px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px 0 #E2E4EB;
  border-radius: 10px;
}

.zj{
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 0;
  padding-right: 10px;
}

.bz{
  width: 22px;
  height: 22px;
  display: block;
  margin-right: 8px;
}

.title2 {
  width: 119px;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #212121;
}

.lg {
  display: flex;
  align-items: center;
}

.title3{
  width: 203px;
  height: 66px;
  font-weight: 400;
  font-size: 12px;
  color: #5D5E5D;
  line-height: 22px;
}

.hr{
  width: 100%;
  margin: 8px 0;
  border: none;
  border-top: 1px solid #ccc;
}

.state-btn-row {
  width: 330px;
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -7px;
}

.state-text {
  font-weight: 400;
  font-size: 12px;
  color: #00A035;
}

.status-btn-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

.action-btn {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  margin: 0;
}

.action-btn:active {
  background-color: #0066cc;
}





</style>